<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>圈子信息</span>
                </div>
            </template>
            <el-form :model="data.circleDetail">
                <el-form-item label="头像" label-width="130px">
                    <el-avatar
                        :src="data.circleDetail.avatar"
                    />
                </el-form-item>
                <el-form-item label="标题" label-width="130px">
                    <el-input v-model="data.circleDetail.title" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="描述" label-width="130px">
                    <el-input :autosize="{ minRows: 10, maxRows: 10 }" v-model="data.circleDetail.description"
                              autocomplete="off" type="textarea" disabled/>
                </el-form-item>
                <el-form-item label="创建人昵称" label-width="130px">
                    <el-input v-model="data.circleDetail.createUserNickName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="创建学校名称" label-width="130px">
                    <el-input v-model="data.circleDetail.createSchoolName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="创建时间" label-width="130px">
                    <span>{{ data.circleDetail.createTime }}</span>
                </el-form-item>
                <el-form-item label="浏览数量" label-width="130px">
                    <span>{{ data.circleDetail.viewCount }}</span>
                </el-form-item>
                <el-form-item label="关注数量" label-width="130px">
                    <span>{{ data.circleDetail.followCount }}</span>
                </el-form-item>
                <el-form-item label="标签" label-width="130px">
                    <el-space :size="5">
                        <el-tag
                            type="primary"
                            disable-transitions
                            v-for="labelName in data.circleDetail.labels" :key="labelName"
                        >{{ labelName }}
                        </el-tag>
                    </el-space>
                </el-form-item>
                <el-form-item label="是否禁用" label-width="130px">
                    <el-tag class="ml-2" type="danger" v-if="data.circleDetail.disable">禁用</el-tag>
                    <el-tag class="ml-2" type="success" v-if="!data.circleDetail.disable">启用</el-tag>
                </el-form-item>
                <el-form-item label="审核状态" label-width="130px" prop="examineStatus">
                    <el-tag class="ml-2" type="primary" v-if="data.circleDetail.status === 1">待审核</el-tag>
                    <el-tag class="ml-2" type="danger" v-if="data.circleDetail.status === 2">未通过</el-tag>
                    <el-tag class="ml-2" type="success" v-if="data.circleDetail.status === 3">已通过</el-tag>
                </el-form-item>
                <el-form-item label="最近未通过原因" label-width="130px" prop="noPassReason">
                    <el-input v-model="data.circleDetail.latestNoPassReason" autocomplete="off" type="textarea"/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>圈子审核记录</span>
                </div>
            </template>
            <el-table :data="data.circleExamineRecords" style="width: 100%">
                <el-table-column prop="examineAdminName" label="审核员" width="180"/>
                <el-table-column prop="isPass" label="是否通过" width="180">
                    <template #default="scope">
                        <el-tag class="ml-2" type="success" v-if="scope.row.isPass">通过</el-tag>
                        <el-tag class="ml-2" type="danger" v-if="!scope.row.isPass">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="noPassReason" label="未通过原因" width="180"/>
                <el-table-column prop="createTime" label="审核时间"/>
            </el-table>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>圈子动态</span>
                </div>
            </template>
            <el-table :data="data.dynamics" style="width: 100%">
                <el-table-column fixed prop="content" label="动态内容" align="center" width="300px"/>
                <el-table-column prop="publishUserNickName" label="发布人" align="center" width="200px"/>
                <el-table-column prop="publishSchoolName" label="发布学校" align="center" width="200px"/>
                <el-table-column prop="disable" label="是否开启评论" align="center" width="150px">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.isOpenComment ? 'success' : 'danger'"
                            disable-transitions
                        >{{ scope.row.isOpenComment ? "开启" : "关闭" }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="disable" label="是否隐藏" align="center" width="150px">
                    <template #default="scope">
                        <el-tag
                            :type="scope.row.isHide ? 'warning' : 'success'"
                            disable-transitions
                        >{{ scope.row.isHide ? "隐藏" : "显示" }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="发布类型" align="center" width="150px">
                    <template #default="scope">
                        <el-tag
                            type="info"
                            disable-transitions
                            v-if="scope.row.type === 1"
                        >悄悄话
                        </el-tag>
                        <el-tag
                            type="info"
                            disable-transitions
                            v-if="scope.row.type === 2"
                        >提问
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="150px">
                    <template #default="scope">
                        <el-tag
                            type="warning"
                            disable-transitions
                            v-if="scope.row.status === 1"
                        >待审核
                        </el-tag>
                        <el-tag
                            type="danger"
                            disable-transitions
                            v-if="scope.row.status === 2"
                        >未通过
                        </el-tag>
                        <el-tag
                            type="success"
                            disable-transitions
                            v-if="scope.row.status === 3"
                        >已通过
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="labels" label="标签" align="center" width="400px">
                    <template #default="scope">
                        <el-tag v-for="labelName in scope.row.labelNames" :key="labelName" style="margin: 5px">{{
                                labelName
                            }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="examineCount" label="审核次数" align="center" width="100px"/>
                <el-table-column prop="viewCount" label="浏览数量" align="center" width="100px"/>
                <el-table-column prop="commentCount" label="评论数量" align="center" width="100px"/>
                <el-table-column prop="kudosCount" label="点赞数量" align="center" width="100px"/>
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="更新时间"
                    width="180"
                    align="center"
                >
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="data.dynamicTotal"
                style="text-align: center; margin-top: 10px"
                @current-change="currentChangeDynamic"
            >
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
import {reactive, onMounted} from "vue";
import {detail} from "@/api/circle/circle";
import {useRoute} from "vue-router";
import {list} from "@/api/circle/circleExamineRecord";
import {pageByCircleUuid} from "@/api/dynamic/dynamic";

export default {
    setup() {
        const route = useRoute();
        const data = reactive({
            circleDetail: '',
            circleExamineRecords: [],
            dynamics: [],
            dynamicTotal: 0
        })
        const dynamicSearchParam = reactive({
            page: 1,
            size: 5
        })
        /**
         * 圈子详情
         * @returns {Promise<void>}
         */
        const circleDetail = async () => {
            detail(route.query.uuid).then(res => {
                data.circleDetail = res.data
            })
        }
        /**
         * 获取圈子审核记录
         * @returns {Promise<void>}
         */
        const listCircleExamineRecord = async () => {
            list(route.query.uuid).then(res => {
                data.circleExamineRecords = res.data
            })
        }
        /**
         * 分页查询某个圈子下的动态
         * @returns {Promise<void>}
         */
        const pageDynamicByCircleUuid = async () => {
            pageByCircleUuid(dynamicSearchParam, route.query.uuid).then(res => {
                data.dynamics = res.data.records;
                data.dynamicTotal = res.data.total
            })
        }
        onMounted(() => {
            circleDetail()
            listCircleExamineRecord()
            pageDynamicByCircleUuid()
        })
        return {
            data
        }
    }
}
</script>